<template>
  <div class="project_body">
    <Header>
    </Header>
    <div class="img">
      <img src="../assets/img/hd.jpg" alt="" style="object-fit: cover">
    </div>
    <div class="project">
        <div class="row_1">
          <div class="col-sm-6 col-lg-4" v-for="item in list" :key="item">
            <div class="thumbnail">
              <img class="projectImg" style="width: 100%;height: 250px;object-fit: cover;" :src="item.project.projectPhotoAddress" alt="...">
              <div class="caption">
                <h3>{{item.project.projectName}}</h3>
                <p>开发人员： <span v-for="item in item.memberName"> {{item}}  </span></p>
                <el-popover
                    placement="top-start"
                    width="300"
                    trigger="click">
                  <h4 style="color: rgba(194,194,6,0.83)">{{item.project.projectName}}</h4>
                  <p style="font-size: 16px">{{item.project.projectBrief}}</p>
                  <a :href="item.project.projectAddress" target="_blank">项目地址</a>
                  <el-button slot="reference">查看详情</el-button>
                </el-popover>
              </div>
            </div>
          </div>

        </div>
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
// import Header from '../components/Header'
// import Bottom from '../components/Bottom'
const Header = () => import('../components/Header')
const Bottom = () => import('../components/Bottom')
export default {
  name: "Project",
  data(){
    return {
    list:[],
    }

  },
  components: {
    Header,
    Bottom
  },
  created() {
    this.$nextTick(function () {
      this.$axios({
        url: '/officialwebsite/projectFrontDesk/selectAll',
        method: 'get',
      }).then(res => {
        console.log(res.obj)
        console.log(res.obj.length)
        // console.log(res.obj.length)
        for (let i = 0; i < res.obj.length; i++) {
          this.list.push(res.obj[i])
        }
        console.log(this.list)

      })
    })
  },
  methods: {

    }
}
</script>

<style lang="less" scoped>
.project_body{
  background-color: #eeeeee;
}
.project {
  //overflow: hidden;
  margin: 40px auto;
  max-width: 1240px;
  //min-height: 400px;
  display: flex;
  //flex-direction: row;
  .row_1 {
    //min-height: 350px;
    margin-top: 10px;
    .thumbnail {
      min-height: 350px;
    }
  }
}
.img{
  margin-top: 45px;
  img{
    width: 100%;
    height: 25em;
  }
}
@media screen and (max-width: 850px) {
  .img {
    margin-top: 0px;
    img {
      height: 15em;
    }
  }
    .project {
      margin-top: 10px;
      .row_1 {
        .thumbnail {
          min-height: 100px!important;
          .projectImg {
            width: 100%;
            height: 50vw!important;
          }
          .caption {
            h3 {
              font-size: 18px;
            }
            p {
              font-size: 14px;
            }
          }
        }
      }
    }
}
</style>
